import React, { Component } from 'react'
import Chart from 'react-apexcharts'
import { Grid, Label } from 'semantic-ui-react'
import { Query } from 'react-apollo'
import Loading from 'components/loading'
import getUserMonth from 'graphql/project/task/user/userMonthYear.graphql'

const categories = [
  '1日',
  '2日',
  '3日',
  '4日',
  '5日',
  '6日',
  '7日',
  '8日',
  '9日',
  '10日',
  '11日',
  '12日',
  '13日',
  '14日',
  '15日',
  '16日',
  '17日',
  '18日',
  '19日',
  '20日',
  '21日',
  '22日',
  '23日',
  '24日',
  '25日',
  '26日',
  '27日',
  '28日',
  '29日',
  '30日',
  '31日',
]

const getInitValue = () => {
  const result = []
  for (let i = 0; i < 31; i += 1) {
    result.push(0)
  }
  return result
}

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      optionsLabel: {
        chart: {
          id: 'apexchart-example',
        },
        xaxis: {
          categories,
        },
        title: {
          text: '标注量月报:',
        },
      },
      optionsTask: {
        chart: {
          id: 'apexchart-example',
        },
        xaxis: {
          categories,
        },
        title: {
          text: '完成任务月报:',
        },
      },
    }
  }

  render() {
    const {
      username, pid, month, year,
    } = this.props
    const variablesFinal = {
      user: username,
      time: month < 10 ? `${year}-0${month}%` : `${year}-${month}%`,
      pid,
    }
    return (
      <Query query={getUserMonth} variables={variablesFinal} fetchPolicy="network-only" notifyOnNetworkStatusChange>
        {({ loading, error, data }) => {
          if (loading) return <Loading />
          if (error) return `Error! ${error.message}`
          const labelValues = [
            {
              name: '标注数量',
              data: getInitValue(),
            },
            {
              name: '任务数量',
              data: getInitValue(),
            },
          ]
          let labelCount = 0
          let taskCount = 0
          if (data && data.user_label_create_view) {
            data.user_label_create_view.map((ann, i) => {
              const dayIndex = parseInt(ann.day.substring(8), 10) - 1
              labelValues[0].data[dayIndex] = ann.labels
              labelCount += ann.labels
            })
          }
          if (data && data.user_task_finish_view) {
            data.user_task_finish_view.map((ann) => {
              const dayIndex = parseInt(ann.day.substring(8), 10) - 1
              labelValues[1].data[dayIndex] = ann.tasks
              taskCount += ann.tasks
            })
          }
          return (
            <Grid.Row>
              <Grid.Column width={16}>
                <Grid>
                  <Grid.Row centered columns={1}>
                    <Grid.Column>
                      <Chart
                        options={this.state.optionsLabel}
                        series={labelValues}
                        type="bar"
                        height={400}
                      />
                    </Grid.Column>
                  </Grid.Row>
                  <Grid.Row centered columns={5}>
                    <Grid.Column textAlign="center">
                      <Label circular style={{ backgroundColor: '#008FFB' }} empty key="red" />
                      {`标注数: ${labelCount}`}
                    </Grid.Column>
                    <Grid.Column textAlign="center">
                      <Label
                        circular
                        style={{ backgroundColor: 'rgb(0, 227, 150)' }}
                        empty
                        key="red"
                      />
                      {`任务数: ${taskCount}`}
                    </Grid.Column>
                  </Grid.Row>
                </Grid>
              </Grid.Column>
            </Grid.Row>
          )
        }}
      </Query>
    )
  }
}
